<html>

<head>
    <meta charset="utf-8" />
    <title>☆极客晨星☆ 用户登陆</title>
    <link rel="stylesheet" media="screen" href="css/login.css">
    <link type="text/css" rel="stylesheet" href="css/global.css">
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/validation/validation/jquery.validate.js"></script>
    <script src="./js/validation/Sliding_Validation_Gu.js"></script>
    <script src="./js/validation/validation/additional-methods.js"></script>
    <script src="./js/validation/validation/localization/messages_zh.js"></script>
</head>

<body>

    <div id="particles-js" style="display: flex;align-items: center;justify-content: center">
        <canvas class="particles-js-canvas-el" style="width: 100%; height: 100%;" width="472" height="625"></canvas>
    </div>
    <div class="top bgblack">
        <div class="topline ">
            <div class="topline-left">
                <h2>☆ 极客晨星 ☆</h2>
            </div>
            <div class="topline-right"><a href="#">登陆</a><a href="register.html">注册</a></div>
        </div>
    </div>
    <div class="apTitle">☆极客晨星☆Web实战开发</div>

    <div class="logcon">
        <form class="cmxform" id="loginform" method="post" action="index.py">
            <fieldset>
                <legend>用户登陆</legend>
                <ul>
                    <li><input type="text" placeholder="账号" name="username" id="username">
                        <label for="username" id="errusername" class="error"></label>
                    </li>
                    <li><input type="password" placeholder="密码" name="upassword" id="upassword">
                        <label for="upassword" id="errupassword" class="error"></label></li>
                    <li>
                        <div id="yzcode"></div>
                    </li>
                </ul>

            </fieldset>
            <fieldset>
                <button type="submit" class="button" id="butsub" visibile="false">登录</button>
            </fieldset>
            <div class="clear"></div>
        </form>
    </div>
    <script src="js/login.js"></script>
    <script src="js/loginApp.js"></script>
    <script>
        function changeImg() {
            let pic = document.getElementById('picture');
            console.log(pic.src)
            if (pic.getAttribute("src", 2) == "img/check.png") {
                pic.src = "img/checked.png"
            } else {
                pic.src = "img/check.png"
            }
        }
        // $.validator.methods.equal = function(value, element, param) {
        //     return value == param;
        // };

        $().ready(function() {
            $("#butsub").attr("disabled", true);
            var validator = $("#loginform").validate({
                debug: false,
                onkeyup: false,
                submitHandler: function(form) {
                    form.submit();
                },
                errorContainer: $("#errusername, #errupassword"),
                errorPlacement: function(error, element) {
                    error.appendTo(element.next());
                },
                success: function(label) {
                    label.addClass("success");
                },
                rules: {
                    upassword: {
                        required: true,
                        minlength: 6,
                        maxlength: 16
                    },
                    username: "stringCheck"
                }

            });

            // highlight
            var elements = $("input[type!='submit'], textarea, select");
            elements.focus(function() {
                $(this).parents('li').addClass('highlight');
            });
            elements.blur(function() {
                $(this).parents('li').removeClass('highlight');
            });
        });
        var sliding_validation = SlidingValidation.create($('#yzcode'), {
                "default_url_icon": "images/right-arrow.png",
                "success_url_icon": "images/ok.png",
                "slide_block_wrapper_width": "220px"
            },
            function() {
                $("#butsub").attr("disabled", false);
            });

        /**
         *参数1 —— 在传入的元素的结尾插入-obj
         */

        /**
         *参数2 —— 修改滑动验证的样式-{"key":"value"}
         * position: "relative", 滑动验证的定位
           top: "0px", 滑动验证的top值
           left: "0px", 滑动验证的left值
           slide_block_wrapper_width: "300px", 滑动验证的宽度
           slide_block_wrapper_height: "40px", 滑动验证的高度
           slide_block_width: "50px", 滑动块的宽度
           slide_block_height: "100%", 滑动块的高度
           margin: "0px 0px 0px 0px", 滑动验证的marigin
           slider_wrapper_zindex: 10000, 滑动验证的z-index
           slider_wrapper_bg: "#e8e8e8", 滑动验证的背景颜色
           slider_bg: "rgb(255,255,255)", 滑块的背景颜色
           progress_bg: "rgb(255,184,0)", 滑动进度的背景颜色
           default_text: "请向右滑动滑块", 滑动区域的文字
           default_text_color: "black", 滑动文字的默认颜色
           success_text_color: "white", 成功后滑动文字的颜色
           default_text_font_size: "12px", 滑动文字的文字大小
           success_show_text: "验证成功", 验证成功后滑动文字的内容
           success_slider_wrapper_bg: "rgb(76,175,80)", 滑动成功后 滑动进度的背景颜色
           success_url_icon: "sliding_block_image/ok.png", 滑动成功后滑块上面的图片 url地址
           default_url_icon: "sliding_block_image/right-arrow.png",  默认滑块上面的url地址
           box_shadow: "1px 1px 5px rgba(0,0,0,0.2)", 滑动验证的阴影
           border: "1px solid #ccc" 滑块的border
         */

        /**
         *参数3 —— 滑动验证成功之后执行的方法-function(){}
         */

        //$("#loginform").validate()
    </script>
</body>

</html>